<template>
    <div>
        <el-row type="flex" justify="space-between" class="e-m-t-45">
            <el-col :span="3" class="buttonList">
                <el-button type="primary" icon="el-icon-plus" plain @click="setRecharge">充值</el-button>
            </el-col>
            <el-col class="text-right">
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item label="">
                        <el-input placeholder="请输入" v-model="key" prefix-icon="el-icon-search"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="getList">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>

        <!-- 更多筛选条件 -->
        <div class="other-search-form is-active">
            <el-form label-position="left" :inline="true" size="small">
                <div class="flex align-items-center">
                    <!-- 时间筛选 -->
                    <timeChangeList v-model="timeType" @input="getList" @change="changeTime"></timeChangeList>
                </div>
                <div class="flex align-items-center">
                    <div class="e-flex-1" v-if="franchiseId == null">
                        <el-form-item label="所属加盟商">
                            <franchiseList v-model="innerFranchiseId"></franchiseList>
                        </el-form-item>
                    </div>
                    <!-- <div class="e-flex-1">
                        <el-form-item label="状态">
                            <el-select v-model="state" placeholder="请选择">
                                <el-option v-for="item in statelist" :key="item.id" :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div> -->
                </div>
            </el-form>
        </div>

        <!-- 选择审核状态 -->
        <div class="type-state e-m-b-30">
            <span v-for="(item, index) in statusArr" :key="index" :class="{ 'on': state == item.value }"
                @click="getManageState(item.value)">
                {{ item.name }}
            </span>
        </div>
        <el-table :data="tableData" :border="true" style="width: 100%" stripe>
            <el-table-column fixed type="index" width="50">
            </el-table-column>
            <el-table-column fixed prop="number" label="单据编号">
            </el-table-column>
            <el-table-column prop="amount" label="充值金额">
            </el-table-column>
            <el-table-column prop="account" label="充值方式">
                <template slot-scope="scope">
                    <span v-if="scope.row.account">{{ scope.row.account.type }}</span>
                </template>
            </el-table-column>
            <!-- <el-table-column prop="franchise" label="充值加盟商">
                <template slot-scope="scope">
                    <span v-if="scope.row.franchise">{{ scope.row.franchise.name }}</span>
                </template>
            </el-table-column> -->
            <!-- <el-table-column prop="operator" label="转出账户">
                <template slot-scope="scope">
                    <span v-if="scope.row.operator">{{ scope.row.operator.name }}</span>
                </template>
            </el-table-column> -->
            <!-- <el-table-column prop="arrivaldate" label="到账时间">
                <template slot-scope="scope">
                    <span v-if="scope.row.arrivaldate">{{ scope.row.arrivaldate }}</span>
                    <span v-else>--</span>
                </template>
            </el-table-column> -->
            <el-table-column prop="createusername" label="申请人">
            </el-table-column>
            <el-table-column prop="createddatetime" label="申请时间">
            </el-table-column>
            <el-table-column prop="examinename" label="审核人">
                <template slot-scope="scope">
                    <span v-if="scope.row.examinename">{{ scope.row.examinename }}</span>
                    <span v-else>--</span>
                </template>
            </el-table-column>
            <el-table-column prop="examinedate" label="审核时间">
                <template slot-scope="scope">
                    <span v-if="scope.row.examinedate">{{ scope.row.examinedate }}</span>
                    <span v-else>--</span>
                </template>
            </el-table-column>
            <el-table-column prop="state" label="状态" width="150">
                <template slot-scope="scope">
                    <span class="color-success" v-if="scope.row.state == '充值成功'">{{ scope.row.state }}</span>
                    <span class="color-warning" v-else-if="scope.row.state == '充值中'">{{ scope.row.state }}</span>
                    <span class="color-danger" v-else>{{ scope.row.state }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="180">
                <template slot-scope="scope">
                    <el-button type="text" @click='getPayPara(scope.row.id)' size="small" v-if="scope.row.state == '充值中' && scope.row.account.type == '微信'">
                        <span>重新发起支付</span>
                    </el-button>
                    <el-button type="text" @click='examine(scope.row)' size="small" v-if="scope.row.state == '充值中'">
                        <span>审核</span>
                    </el-button>
                    <el-button type="text" @click='reject(scope.row)' size="small" v-if="scope.row.state == '充值中'">
                        <span>驳回</span>
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="table-pagination">
            <el-pagination background layout="sizes, total, prev, pager, next" :total="total"
                :page-sizes="[10, 50, 100, 200]" :page-size="pageSize" :current-page="pageIndex" @current-change="pageChange"
                @size-change="handleSizeChange">
            </el-pagination>
        </div>
        <!-- 充值 -->
        <el-dialog title="充值" :visible.sync="dialogVisible" width="500px" z-index="99">
            <el-form ref="form" :model="recharge" :rules="rules" label-width="100px">
                <el-form-item label="充值方式" prop="accountid">
                    <el-select v-model="recharge.accountid" placeholder="请选择" @change="chooseWay">
                        <el-option v-for="item in options" :key="item.id" :label="item.type" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="充值金额" prop="amount">
                    <el-input type="number" v-model="recharge.amount" placeholder="请输入充值金额"></el-input>
                </el-form-item>
                <el-form-item label="充值时间" prop="arrivaldate">
                    <el-date-picker v-model="recharge.arrivaldate" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" style="width: 100%;">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="汇款单号" prop="transactionid" v-if="recharge.type == '银行账户'">
                    <el-input v-model="recharge.transactionid" placeholder="请输入汇款单号"></el-input>
                </el-form-item>
                <el-form-item label="上传凭证" prop="icon" v-if="recharge.type == '银行账户'">
                    <cropper-upload :zoomScale='[1, 1]' :isCropper="false" @getUpload="handleFilesSuccess"
                        class="avatar-uploader">
                        <img v-if="recharge.proves" :src="fileURL + recharge.proves" class="avatar">
                        <div class="avatar-uploader-icon" v-else>
                            <div><i class="el-icon-plus"></i></div>
                            <div class="e-font-14">上传凭证</div>
                        </div>
                    </cropper-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="confirmRecharge">确定</el-button>
            </span>
        </el-dialog>
        <!-- 审核 -->
        <el-dialog title="审核" :visible.sync="examineDialogVisible" width="500px" z-index="99"> 
            <el-form ref="form" label-width="auto">
                <el-form-item label="到账时间">
                    <el-date-picker v-model="examineForm.arrivaldate" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="examineDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="confirmExamine">确定</el-button>
            </span>
        </el-dialog>
        <!-- 驳回 -->
        <el-dialog title="驳回" :visible.sync="rejectVisible" width="500px" z-index="99"> 
            <el-form ref="form" label-width="auto">
                <el-form-item label="驳回原因">
                    <el-input type="textarea" v-model="rejectForm.reason" placeholder="请输入驳回原因"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="rejectVisible = false">取消</el-button>
                <el-button type="primary" @click="confirmReject">确定</el-button>
            </span>
        </el-dialog>
        <!-- 微信扫码支付 -->
        <el-dialog title="微信扫码支付" :visible.sync="wechatDialogVisible" width="500px" z-index="99"> 
            <div class="flex align-items-center justify-content-center">
                <el-image
                    style="width: 400px; height: 400px"
                    :src="wechatPayPara.qrcode"
                ></el-image>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="wechatDialogVisible = false">取消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import timeChangeList from '@/components/form-select-type/timeChangeList.vue'
import franchiseList from '@/components/form-select-type/franchiseList.vue'
import cityList from '@/components/form-select-type/cityList.vue'

var map = {}
// var geocoder = {}
// var marker = {}
export default {
    layout: 'admin',
    components: { franchiseList,cityList,timeChangeList },
    head() {
        return {
            title: '充值申请记录' 
        }
    },
    props: {
        franchiseId: {
            type: [Number, String],
            default: null
        }
    },
    data() {
        return {
            // 筛选条件
            // 时间类型
            timeType: 0, //筛选时间类别：0全部，1今日，2昨日，3本月，4上月，5本季度，6上季度，7本年，9自定义时间段
            startDate: '', //开始时间
            endDate: '', //结束时间
            statusArr: [
                {
                    name: '全部',
                    value: null
                },
                // {
                //   name: '待派单',
                //   value: 0
                // },
                {
                    name: '未审核',
                    value: 1
                },
                {
                    name: '已审核',
                    value: 2
                },
            ],
            state: null,
            // 充值
            dialogVisible: false,
            recharge: {
                amount: null,
                accountid: 0,
                remark: '',
                arrivaldate: '',
                proves: '',
                type: "", //充值方式类型
                transactionid: '', //汇款单号
            },
            rules: {
                amount: [
                    { required: true, message: '请输入金额', trigger: 'blur' },
                ],
                accountid: [
                    { required: true, message: '请选择汇款账户', trigger: 'change' }
                ],
                transactionid: [
                    { required: true, message: '请输入汇款单号', trigger: 'blur' },
                ],
                arrivaldate: [
                    { required: true, message: '请选择日期', trigger: 'change' }
                ]
            },
            options: [],//充值账户
            // 审核
            examineDialogVisible: false,
            examineForm: {
                id: 0,
                arrivaldate: ''
            },
            // 驳回
            rejectVisible: false,
            rejectForm: {
                id: 0,
                reason: ''
            },
            // 列表显示
            key: '',
            pageIndex: 1,
            pageSize: 10,
            total: 0,
            tableData: [],
            // 微信扫码支付
            wechatDialogVisible: false,
            wechatPayPara: {
                qrcode: ""
            },

        }
    },
    mounted() {
        if (this.franchiseId) {
            this.innerFranchiseId = this.franchiseId
        }
        this.getList()
        this.getAccountList()
    },
    watch: {
        dialogVisible(val) {
            if (!val) {
                
            }
        },
        rejectVisible(val) {
            if (!val) {
                this.rejectForm = {
                    id: 0,
                    reason: ''
                }
            }
        },
    },
    methods: {
        // 发起充值
        setRecharge() {
            this.dialogVisible = true
            this.recharge.amount = null
            this.recharge.remark = ''
            this.recharge.accountid = ''
            this.recharge.arrivaldate = ''
            this.recharge.proves = ''
        },
        // 充值
        confirmRecharge() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.$axios.post('/Franchise/Recharge/Create', {
                        amount: this.recharge.amount,
                        remarks: this.recharge.remark,
                        accountid : this.recharge.accountid,
                        arrivaldate : this.recharge.arrivaldate,
                        proves : this.recharge.proves,
                        transactionid: this.recharge.transactionid,
                        franchiseId: this.franchiseId
                    }).then((res) => {
                        this.dialogVisible = false
                        if(res.qrcode){
                            this.wechatPayPara.qrcode = res.qrcode
                            this.wechatDialogVisible = true
                        }else{
                            this.$message.success('充值成功')
                        }
                        this.getList()
                        this.$emit('submit')
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
            
        },
        // 充值账户
        getAccountList() {
            this.$axios.post('/Operator/Account/List', {
                "Key": ''
            }).then((res) => {
                this.options = res.filter((item)=>item.state == '已启用')
            })
        },
        // 选择充值方式
        chooseWay(id){
            console.log('选择充值方式:',id)
            this.recharge.type = this.options.find((item)=>item.id == id).type
        },
        // 微信支付获取支付参数，用于重新支付
        getPayPara(id){
            this.$axios.get('/Franchise/Recharge/GetPayPara', {
                params:{
                    id: id,
                    isScanCode: true, //是否扫码支付
                }
            }).then((res) => {
                console.log(res)
                this.wechatPayPara.qrcode = res.qrcode
                this.wechatDialogVisible = true
            })
        },
        // 上传凭证
        handleFilesSuccess(res, file) {
            console.log(res,file)
            if (file.status === "success") {
                this.loading = false
                this.recharge.proves = res.path
            }
        },
        // 选择时间
        changeTime(e) {
            console.log(e)
            this.startDate = e['startDate']
            this.endDate = e['endDate']
            this.timeType = e['timeType']
            this.getList()
        },
        // 选择订单管理状态
        getManageState(val) {
            this.pageIndex = 1
            this.state = val
            this.getList()
        },
        getList() {
            this.$axios.post('/Franchise/Recharge/List', {
                "pageIndex": this.pageIndex,
                "pageSize": this.pageSize,
                "key": this.key,
                "timeType": this.timeType,
                "startDate": this.startDate,
                "endDate": this.endDate,
                "franchiseId": this.innerFranchiseId || 0,
                "state": this.state,
                // "searchDateType": 0, //搜索时间类型\n0：创建时间\n1：审核时间\n2：到账时间
                // "accountId": 0,
            }).then((res) => {
                console.log(res)
                this.loading = false
                this.tableData = res.rows;
                this.total = res.total;
            }).catch(() => {
                this.loading = false
            })
        },
        pageChange(e) { // 页码切换事件
            this.page = e;
            this.getList()
        },
        handleSizeChange(val) {
            this.page = 1;
            this.pageSize = val;
            this.getList()
        },
        // 发起审核
        examine(row){
            this.examineForm.id = row.id
            this.examineDialogVisible = true
        },
        // 确认审核提交
        confirmExamine() {
            // return new Promise((resolve, reject) => {
                this.$confirm('您确定要审核通过吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.post('/Franchise/Recharge/Examine',{
                        id: this.examineForm.id,
                        arrivaldate: this.examineForm.arrivaldate
                    }).then((res) => {
                        this.$message.success(res.msg);
                        this.getList()
                        this.examineDialogVisible = false
                        // resolve()
                    })
                })
            // })
        },
        // 驳回
        reject(row) {
            this.rejectForm.id = row.id
            this.rejectVisible = true
        },
        // 确认驳回
        confirmReject() { 
            this.$axios.post('/Franchise/Recharge/Reject',{
                id: this.rejectForm.id,
                reason: this.rejectForm.reason
            }).then((res) => {
                this.$message.success(res.msg);
                this.getList()
                this.rejectVisible = false
            })
        },
    }
}
</script>

<style lang="scss" scoped>
.nav-bar {
    padding: 20px 0 0;
}

.send {
    margin-top: 15px;
    margin-right: 10px;
}

.dialogForm {
    display: flex;
    flex-wrap: wrap;

    .el-form-item {
        width: 50%;
        float: left;

        &.all {
            width: 100%;
        }

        .el-select {
            width: 100%;
        }
    }
}

.user-face {
    display: flex;
    align-items: center;
    position: relative;

    .male,
    .female {
        font-size: 14px;
        position: absolute;
        left: 30px;
        top: 0;
        background-color: #fff;
        height: 16px;
        width: 16px;
        line-height: 16px;
        border-radius: 6px;
    }

    .male {
        color: var(--blue);
    }

    .female {
        color: var(--pink);
    }
}
</style>
